<template>
  <div class="user">
<!--    第一行-->
    <van-row @click="openLoginModal">
      <van-col span="6">
        <img :src="avator" alt="" />
      </van-col>
      <van-col span="15">
        {{nickName}}
      </van-col>
      <van-col span="3">
        <van-icon name="arrow" />
      </van-col>
    </van-row>

<!--    第二行宫格-->
    <van-grid class="user_grid" :column-num="3" >
      <van-grid-item class="user_grid_item"
                     v-for="(item,index) in userData" :key="index"
                     :icon="item.icon" :text="item.name"
                     style="height: 122px"

      />
    </van-grid>


    <transition name="van-fade">
    <div class="login-modal" v-show="isShowLoginModal" >
<!--      点击登录区域外，隐藏登录窗口-->
      <div class="close-modal" @click="isShowLoginModal=!isShowLoginModal"></div>
<!--      用户表单数据-->
      <van-form @submit="onSubmit" class="login-form">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
    </transition>

  </div>
</template>

<script>
import { UserLogin } from '@/request/api'
import { userData } from '@/request/user'

export default {
  name: 'User',
  data () {
    return {
      avator:require("../assets/avatar.png"),    //用户头像
      username:'',
      password:'',
      isShowLoginModal:false,             //登录窗口是否可见
      nickName:'用户登录',
      userData:[],

    }
  },
  created () {
   // 页面刚加载时，判断用户是否登录，获取localStorege有没有token
   //  如果有token，表明登录
    let token = localStorage.getItem("token")
    if(token){
      let userInfo=JSON.parse(localStorage.getItem("userInfo"))
      this.nickName=userInfo.nickname
      this.avator=userInfo.avatar

      // 获取的自定义用户数据
      this.userData=userData
    }
  },
  computed: {},
  methods: {
    // 用户登录(){
      onSubmit(values){
        let username=values["用户名"]
        let pwd=values["密码"]
        UserLogin({ username, pwd }).then(res=>{
          console.log(res.data)
          this.$toast.success('登录成功')
          localStorage.setItem("token",res.data.token)
          localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
          setTimeout(()=>{
            this.isShowLoginModal=!this.isShowLoginModal
            this.nickName=res.data.userInfo.nickname
            this.avator=res.data.userInfo.avatar
          },1000)


        })
    },
    openLoginModal(){
        // 判断用户是否登录，如果登录，return，否则显示登录窗口
      let token = localStorage.getItem("token")
      if(token){
        return
      }
      this.isShowLoginModal=!this.isShowLoginModal
    },
  }
}
</script>

<style lang="less" scoped>
.user{
  font-size:.24rem;
}
//第一行，用户名，用户头像样式渲染
.van-row {
  padding: 0.2rem 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 0.7rem;
    font-size: 0.18rem;
    img {
      width: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}
//登录窗口
.login-modal{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  //覆盖全局页面
  z-index: 99;
  //登录表单
  .login-form{
    width: 90%;
    background-color: #fff;
    padding-bottom: .2rem;
    position: absolute;
    left: 50%;
    top: 30%;
    margin-left: -45%;
  }

  .close-modal{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
  }
}



</style>
